<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <form name="myfrom" id="from-demo" action="" class="form-example">
    <div class="form-example">
      <label for="name">Enter your name：</label>
      <input name="username" id="name" required />
    </div>
    <div class="form-example">
      <label for="email">Enter your email：</label>
      <input name="useremail" id="email" required />
    </div>
    <div class="form-example">
      <button type="reset">
        重置
      </button>
      <button type="submit">
        提交
      </button>
    </div>
  </form>
  <script>
    // document.forms
    // console.log('===document.myfrom===>', document.myfrom)
    const fromDom = document.getElementById('from-demo')
    fromDom.addEventListener('submit', (e) => {
      e.preventDefault()
      // new FormData(e.target).entries().forEach(([key, value]) => {
      //   console.log('===key===>', key)
      //   console.log('===value===>', value)
      // })
      // console.log('===e.target.username===>', e.target.username)
      // console.log('===e.target.useremail===>', e.target.useremail)
      // console.log('===submit===>', e)
    })
    fromDom.addEventListener('reset', (e) => {
      console.log('===reset===>', e)
    })





    // // 添加 input 事件监听器
    // document.getElementById('name').addEventListener('input', (e) => {
    //   console.log('姓名输入:', e.target.value);
    // });

    // // 添加 change 事件监听器
    // document.getElementById('email').addEventListener('change', (e) => {
    //   console.log('电子邮件改变:', e.target.value);
    // });

    // // 添加 focus 事件监听器
    // document.getElementById('name').addEventListener('focus', (e) => {
    //   console.log('姓名输入框获得焦点');
    // });

    // // 添加 blur 事件监听器
    // document.getElementById('email').addEventListener('blur', (e) => {
    //   console.log('电子邮件输入框失去焦点');
    // });

    // // 添加 invalid 事件监听器
    document.getElementById('name').addEventListener('invalid', (e) => {
      e.preventDefault(); // 阻止默认的无效提示
      console.log('姓名输入无效');
    });

    document.getElementById('email').addEventListener('invalid', (e) => {
      e.preventDefault(); // 阻止默认的无效提示
      console.log('电子邮件输入无效');
    });



  </script>
</body>

</html>